<template>
  <!-- 链路推荐--路由 -->
  <div>
    <div class="mb-10">
      <el-radio-group v-model="routeSort" size="mini" class="mr-10" @change="sortRouteList">
        <el-radio-button label="linkLength">{{ $t('SHORT_LENGTH') }}</el-radio-button>
        <el-radio-button label="nodeNum">{{ $t('LESS_NODE') }}</el-radio-button>
      </el-radio-group>
      <process-bar
        v-show="routeCount || recommended"
        :cur-process="Math.floor((obtainedCount * 100) / (routeCount || 1))"
      >
        <span slot="doing" class="font-mini">{{ $t('RECOMMENDING') }}</span>
        <span slot="done" class="font-mini">{{
          $t('RECOMMENDED', { count: routeList.length })
        }}</span>
      </process-bar>
      <el-button
        class="fr"
        :disabled="obtainedCount < routeCount || recommended"
        @click="rerecommend(operateType)"
      >{{ $t('RECOMMENDER') }}</el-button>
    </div>
    <el-table
      :data="routeList"
      class="tab-overflow"
      style="width: 100%"
      row-key="routeLinkId"
      :expand-row-keys="expandRow"
      size="mini"
      border
      @expand-change="expandChange"
    >
      <template slot="empty">
        <NullData />
      </template>
      <el-table-column align="center" :label="$t('SEQUENCE')" width="100" show-overflow-tooltip>
        <template v-slot="scope">
          <div class="pointer" @click="expandChange(scope.row)">
            {{ scope.$index + 1 }}
            <i v-if="expandRow.some(i => i === scope.row.routeLinkId)" class="el-icon-arrow-down" />
            <i v-else class="el-icon-arrow-right" />
          </div>
        </template>
      </el-table-column>
      <div class="overflow-hidden">
        <el-table-column type="expand" width="1">
          <template slot-scope="props">
            <div style="padding: 10px 20px">
              <channel-list
                :form-data="formData"
                :row-data="props.row"
                :show-check-box="showCheckBox"
                :show-cutover-list="false"
                :operate-type="operateType"
                :back-channel-id-list="backChannelIdList"
                @reload="$emit('reload')"
                @delRow="delRow(props)"
              />
            </div>
          </template>
        </el-table-column>
      </div>
      <el-table-column
        align="center"
        prop="linkLength"
        :label="$t('LESS_LENGTH')"
        width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        prop="nodeNum"
        :label="$t('NODE_NUM')"
        width="100"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          {{ scope.row.nodeNum - 2 }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        :label="$t('MINIMUM_NUMBER_FIBER_SHIFTS')"
        width="120"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          {{ Math.min(...scope.row.channelList.map(i => i.cutoverNum)) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        :label="$t('INTERMEDIATE_NODE')"
        align="left"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <div v-html="getLinkDetail(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      width="1000px"
      :visible="showFilter"
      :title="$t('RECOMMENDER')"
      append-to-body
      @close="showFilter = false"
    >
      <FilterItem ref="filterItem" :form-data="formData" />
      <template v-slot:footer>
        <el-button @click="showFilter = false">{{ $t('CANCEL') }}</el-button>
        <el-button type="primary" @click="$debounce(reacquireRoute)">{{
          $t('RECOMMENDER')
        }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import ChannelList from '@/components/ChannelList'
  import ProcessBar from '@/components/ProcessBar'
  import mixin from '@/mixin/bizFunctionMixin'
  import FilterItem from './open/FilterItem'

  export default {
    components: { ChannelList, ProcessBar, FilterItem },
    mixins: [mixin],
    props: {
      formData: {
        type: Object,
        default: () => {}
      },
      operateType: {
        type: String,
        default: 'open'
      },
      backChannelIdList: {
        type: Array,
        default: () => []
      },
      showCheckBox: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        routeSort: 'linkLength',
        routeList: [],
        screened: false,
        bizFormData: {
          aPortData: {},
          zPortData: {},
          aPortData2: {},
          zPortData2: {}
        },
        expandRow: [],
        showFilter: false
      }
    },
    methods: {
      reacquireRoute() {
        this.$refs.filterItem.getFormData()
        this.getRouteList(this.operateType)
      },
      expandChange(row) {
        console.log('expandChange', row)
        this.expandRow =
          this.expandRow[0] && this.expandRow[0] === row.routeLinkId ? [] : [row.routeLinkId]
      },
      delRow(props) {
        // console.log('delRow', props)
        this.routeList.splice(props.$index, 1)
      },
      // 链路信息
      getLinkDetail(data) {
        let linkDetail = ''
        data.segmentList.forEach(i => {
          linkDetail = linkDetail + i.startNode.nodeName + '-->'
          if (i.cable) {
            const cabcleColor = this.originalCabcle.includes(i.cableId) ? 'main-cable' : ''
            linkDetail = `${linkDetail}<span class="${cabcleColor}">${i.cable.cableName}</span>-->`
          }
        })
        const original = data.original ? '（' + this.$t('ORIGINAL_LINK') + '）' : ''
        return `<div>${original + linkDetail + data.endNode.nodeName}</div>`
      }
    }
  }
</script>

<style scoped lang="scss">
  .tab-overflow {
    max-height: 500px;
    overflow-y: auto;

    &.el-table::before {
      height: 0;
    }
  }
</style>
